<template>
  <h3>文本插值&原始HTML</h3>

  <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>

  <div class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </div>

  <hr />

  <div>
    <p>使用文本插值：{{ rawHtml }}</p>
    <p v-text="rawHtml"></p>
    <p>使用文本插值：{{ rawHtml + '后缀字符串' }}</p>
    <p>使用文本插值：{{ `${rawHtml} + 后缀字符串` }}</p>
    <p>使用文本插值：{{ istrue ? rawHtml : `后缀字符串false` }}</p>
    <p>使用文本插值：{{ istrue ? arr.join('-') : `false` }}</p>
    <p>{{ arr.join('--') }}</p>
  </div>
  <hr />
  <div>
    <h3>使用v-html指令, 能解析span标签:</h3>
    <p v-html="rawHtml"></p>
    <h3>使用v-text指令, 不能解析span标签:</h3>
    <p v-text="rawHtml"></p>

    <hr />

    <div>
      <div>Current Count: {{ count }}</div>
      <div>Current doubleCount: {{ doubleCount }}</div>
      <button type="button" @click="counterStore.increment">counterStore.count++</button>
      <div>ref: {{ cr }}</div>
      <button type="button" @click="cr++">ref:cr++</button>
    </div>

  </div>
</template>

<script lang="ts">
export default {
  name: 'diyDemo21'
}
</script>

<script setup lang="ts">

import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

const counterStore = useCounterStore()
const { count, doubleCount } = storeToRefs(useCounterStore())
const cr = ref(0)

const rawHtml = `<span style="color: blue">我是html标签span</span>`

const istrue = false

const arr = ['长生', '林萃', '志超', '梦娇']
</script>

<style></style>
